<template>
    <div class="saveimg" catchtouchmove="true">
        <div class="popup" style="width: 345px;">
            <div class="close" @click="closeShow" style="width: 345px;"><img src="/static/images/cha.png" alt="" ></div>
            <canvas style="width:345px; height: 175px;" canvas-id="secondCanvas" binderror="canvasIdErrorCallback"></canvas>
            <div class="space"></div>
            <div class="button" @click="saveimg" style="width: 345px;">保存</div>    
             <!-- <img class="bgc"  :src="img+'/1002.png'" alt=""> -->
        </div>
        
    </div>
    
</template>

<script>
export default {
     props:['info','qrcode','type'],
     data(){
         return{
            img: this.$URL.imgurl,
         }
     },
     methods: {
        saveimg: function (e) {
          wx.canvasToTempFilePath({
            canvasId: 'secondCanvas',
            success: function (res) {
              wx.saveImageToPhotosAlbum({
                filePath: res.tempFilePath,
                success(result) {
                  wx.showToast({
                    title: '图片保存成功',
                    icon: 'success',
                    duration: 2000
                  })
                }
              })
            }
          })
        },
        closeShow() {
            this.$emit('closeShow');
        },
        wordsWrap(ctx, name, nameWidth, maxWidth, startX, srartY, wordsHight) {
          let lineWidth = 0;
          let lastSubStrIndex = 0;
          for (let i = 0; i < name.length; i++) {
            lineWidth += ctx.measureText(name[i]).width;
            // console.log(lineWidth)
            if (lineWidth > maxWidth) {
              ctx.fillText(name.substring(lastSubStrIndex, i), startX, srartY);
              srartY += wordsHight;
              lineWidth = 0;
              lastSubStrIndex = i;
            }
            if (i == name.length - 1) {
              ctx.fillText(name.substring(lastSubStrIndex, i + 1), startX, srartY);
            }
          }
        },

     },
     onLoad(){
       wx.showLoading({
         title: "生成名片中...",
         mask: true,
       });
       var context = wx.createCanvasContext('secondCanvas')
            wx.getImageInfo({
                src: this.img+'/1002.png',
                success: (res) => {
                  context.drawImage(res.path, 0, 0, 345, 175);
                  context.fillStyle = "#FFF";
                  // context.fillRect(103, 180, 125, 125);
                  // context.drawImage(res.path, 105, 192, 120, 120);
                  console.log(this.info.avatar)
                  wx.getImageInfo({
                    src: this.info.avatar,
                    success: (res2) => {
                      console.log(res2.path)
                      // context.drawImage(res2.path, 52, 99, 45, 45);
                      var avatarurl_width = 45;    //绘制的头像宽度
                      var avatarurl_heigth = 45;   //绘制的头像高度
                      var avatarurl_x = 20;   //绘制的头像在画布上的位置
                      var avatarurl_y = 30;   //绘制的头像在画布上的位置
                      context.save();

                      context.beginPath(); //开始绘制
                      //先画个圆   前两个参数确定了圆心 （x,y） 坐标  第三个参数是圆的半径  四参数是绘图方向  默认是false，即顺时针
                      context.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false);
                      context.fillStyle = "#DD2626"; 

                      context.clip();//画好了圆 剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内 这也是我们要save上下文的原因

                      context.drawImage(res2.path, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth); // 推进去图片，必须是https图片

                      context.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下即状态 还可以继续绘制
                      wx.getImageInfo({
                        src: this.qrcode,
                        success: (res4) => {
                           context.drawImage(res4.path, 260, 91, 65, 65);
                           wx.getImageInfo({
                            src: this.img+'/adress.png',
                            success: (res3) => {
                                context.drawImage(res3.path, 20, 100, 10, 12);
                                context.setFontSize(12)
                                context.setFillStyle("#666")
                                context.fillText("地址：", 36, 110)
                                if(this.type==2){
                                      context.setFontSize(15)
                                      context.setFillStyle("#333")
                                      context.fillText(this.info.cert.company_name, 82, 48)
                                      if(this.info.cert.introduction){
                                          context.setFontSize(12)
                                          context.setFillStyle("#666")
                                          context.fillText(this.info.cert.introduction, 82, 68)
                                      }else{
                                          context.setFontSize(12)
                                          context.setFillStyle("#666")
                                          context.fillText("没有设置", 82, 68) 
                                      } 
                                      if(this.info.cert.company_address){
                                          context.setFontSize(12)
                                          context.setFillStyle("#333") 
                                          this.wordsWrap(context, this.info.cert.company_address, 265,160, 80, 110, 15);
                                      } else{
                                          context.setFontSize(12)
                                          context.setFillStyle("#333") 
                                          this.wordsWrap(context, "没有设置位置", 265,160, 80, 110, 15);
                                      }   
                                    
                                }else{
                                      context.setFontSize(15)
                                      context.setFillStyle("#333")
                                      context.fillText(this.info.nickname, 82, 48)
                                      if(this.info.brief){
                                          context.setFontSize(12)
                                          context.setFillStyle("#666")
                                          context.fillText(this.info.brief, 82, 68)
                                      }else{
                                          context.setFontSize(12)
                                          context.setFillStyle("#666")
                                          context.fillText("没有设置", 82, 68) 
                                      } 
                                      if(this.info.area){
                                          context.setFontSize(12)
                                          context.setFillStyle("#333") 
                                          this.wordsWrap(context, this.info.area, 265,160, 80, 110, 15);
                                      } else{
                                          context.setFontSize(12)
                                          context.setFillStyle("#333") 
                                          this.wordsWrap(context, "没有设置位置", 265,160, 80, 110, 15);
                                      }   
                                }
                                
                                context.stroke()
                                context.draw()
                                wx.hideLoading();
                                  
                            }
                        })
                        }
                      })
                    }
                  })
                  
                }
              })
     }
}
</script>

<style lang="scss">
  .saveimg {
    background-color: rgba(0, 0, 0, .7);
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:2;
    .popup{
        width:345px;
        margin:100px auto;
        position:fixed;
        left:0;
        right:0;
        top:100px;
        margin:auto;
    }
    .close {
      height: 30px;
      width: 345px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      color: #fff;

      img {
        height: 25px;
        width: 25px;
      }
    }

    .cont {
      width: 345px;
      height: 175px;
      // margin-bottom: 30px;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      .bottom {
        display: flex;
        justify-content: space-between;
        z-index: 999;
        align-items: center;
        box-sizing: border-box;
        padding: 0 20px;

        .erweima {
          height: 65px;
          width: 65px;
          box-sizing: border-box;
          border: 1px solid #000;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .adres {
          width: 210px;
          font-size: 12px;
          font-weight: 500;
          color: rgba(51, 51, 51, 1);
          display: flex;
          justify-content: space-between;

          span {
            width: 60px;
            display: flex;
            align-items: flex-start;

            img {
              height: 12px;
              width: 12px;
              vertical-align: center;
              margin-right: 7px;
              margin-top: 2px;
            }
          }

          div {
            width: 150px;
          }
        }
      }

      .top {
        display: flex;
        justify-content: flex-start;
        z-index: 999;
        align-items: center;
        box-sizing: border-box;
        padding: 0 20px;

        .info {
          display: flex;
          flex-direction: column;
          justify-content: space-around;

          // align-items: center;
          span {
            font-size: 15px;
            font-weight: bold;
            color: rgba(51, 51, 51, 1);
          }

          div {
            font-size: 12px;
            font-weight: 500;
            color: rgba(102, 102, 102, 1);
          }
        }

        .touxiang {
          height: 45px;
          width: 45px;
          margin-right: 17px;
          box-sizing: border-box;

          img {
            height: 100%;
            width: 100%;
            border-radius: 50%;
            border: 1px solid #1a84fb;
          }
        }
      }

      .bgc {
        position: absolute;
        left: 0;
        top: 0;
        width: 345px;
        height: 175px;
        z-index: 0;
      }
    }

    .space {
      height: 30px;
      width: 345px;
    }

    .button {
      color: #1a84fb;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      font-weight: bold;
      width: 345px;
      height: 45px;
      background: rgba(255, 255, 255, 1);
    }
  }
</style>
